<template>
  <div>
    <div v-show="isLive" id="dplayer" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      isLive: true,
      flvUrl: this.$route.query.flvUrl
    }
  },
  mounted () {
    // this.videoFun('https://pull.ymq01.com/liveb/392700164478873601.flv?wsSecret=6fb0f35fc2723975f238898fa4951dc3&wsABSTime=608ae034')
    /* this.$nextTick(() => {

    }) */
    this.videoFun(this.$route.query.flvUrl)
  },
  methods: {
    videoFun (urls, types = 0) {
      console.log(urls, 'urls')
      const DPlayer = require('dplayer')
      this.playShow = true
      this.dp = new DPlayer({
        // 配置参数
        container: document.getElementById('dplayer'),
        live: true,
        danmaku: false, // 弹幕
        autoplay: true, // 自动播放
        screenshot: true, // 截屏
        theme: '#FADFA3',
        loop: false,
        lang: 'zh-cn',
        preload: 'auto',
        volume: 0.7,
        video: {
          pic: '',
          type: 'custom',
          // flv必须要这么配置才可以播放
          customType: {
            custom: (video, player) => {
              const flv = require('flv.js')
              this.flvPlayer = flv.default.createPlayer({
                type: 'flv',
                url: urls
              })
              this.flvPlayer.attachMediaElement(video)
              this.flvPlayer.load()
            }
          }
        }
      })
      // 判断是否开赛
      /* this.dp.on('play', () => {
        if (types !== 0) {
          this.dp.pause()
        }
        // this.dp.fullScreen.request('browser');
      }) */
      // 加载时提示
      this.dp.on('waiting', () => {
        setTimeout(() => {
          if (this.playShow) {
            this.dp.notice('如长时间无法播放，请切换其他播放源', 6000)
          }
        }, 6000)
      })
      // 视频播放时处理
      this.dp.on('canplay', () => {
        this.playShow = false
      })
    }
  }
}
</script>

<style  lang="scss" scoped>
</style>
